<template>
    <div>
        <!-- <router-link :to="{name:'home'}">home</router-link>|<router-link to="/about">about</router-link>
        <hr>
        <router-view></router-view> -->

        <!-- 编程式的导航  -->
        <!-- <span @click="ck1('home')">home</span>|
        <span @click="ck1('about')">about</span>
        <button @click="forword">前进</button>
        <button @click="back">后退</button> -->

        <!-- 路由内容所出现的位置 -->
        <router-view></router-view>
        <router-view name="a"></router-view>
    </div>
</template>

<script>
export default {
    methods: {
        // ck1(path1) {
        //     // 第一：push(有历史记录)
        //     // push和params组合不行
        //     // query传参在头部有显示，但是params在头部不显示
        //     // this.$router.push(`/${path1}`)
        //     // this.$router.push({path:`/${path1}`})
        //     // this.$router.push({name:path1})
        //     // this.$router.push({ name: path1, query: { id: 1 } })
        //     this.$router.push({name:path1,params:{id:1}})
        //     // this.$router.push({name:path1})
        //     // 第二：replace(没有历史记录)
        //     // this.$router.replace({path:path1})
        // },
        // 前进
        // forword(){
        //     this.$router.go(1)
        // },
        // 后退
        // back(){
        //     this.$router.go(-1)
        // }
    },
    // created() {
    //     setTimeout(() => {
    //         console.log(this.$route.query.id);
    //     }, 1000);
    // }
}
</script>

<style lang="less" scoped></style>